// 该状态模块为首页的数据处理

// 导入创建切片的方法
import { createSlice } from "@reduxjs/toolkit";

import {getBannerList,getProList} from '../../api/home'

const homeSlice = createSlice({
    name: 'home', // 定义状态模块的名称
    initialState: {
        // 理解为 vuex 中的 state ，用来放全局状态的地方
        bannerList:[],
        proList: []
    },
    reducers: {
        // 理解为 vuex 中的 mutations
        // 定义修改全局状态的方法
        changeBannerList(state, action){
            // 将传递的 action.payload 设置在 bannerList 上
            state.bannerList = action.payload
        },
        changeProList(state, action){
            state.proList = action.payload
        }
    }
})

// 导出修改方法
// 当组件获取到数据后，可以通过 dispatch 触发此处导出的函数
export const { changeBannerList,changeProList } = homeSlice.actions

// 如果需要异步操作，那么可以在这里直接进行异步的定义即可
export function getBannerListAction(dispatch){
    getBannerList().then(res => {
        dispatch(changeBannerList(res.data.data))
    })
}

export function getProListAction(params){
    // 如果异步操作需要传递参数时，那么直接在函数中接收即可
    // 接收之后，无法获取 dispatch
    // 需要获取 dispatch 可以通过 return 一个函数的方式进行获取使用
    return (dispatch)=>{
        getProList(params).then(res => {
            dispatch(changeProList(res.data.data))
        })
    }
}

// 导出 reducer
export default homeSlice.reducer